<template>
  <div class="background">
    <div class="wrap">
      <el-row :gutter="20" style="margin-top:10px;">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-card class="box-card">
              <div slot="header" class="animate__fadeInBottomLeft clearfix">
                <span class="animate__fadeInLeft">个人中心</span>
              </div>
              <div class="name-role">
                <span class="sender"><el-image
                  @click="popUpload"
                  :src="userInfo.userHead"
                  style="width: 100px ;border-radius: 50%"></el-image></span>
              </div>
              <div class="name-role">
                <span class="sender">{{ userInfo.userName }}</span>
              </div>
              <div class="name-role">
                <span class="sender">粉丝: {{ userInfo.userFans }}</span>
                <span class="sender">访问量: {{ userInfo.userVisits }}</span>
              </div>
              <div class="registe-info">
          <span class="registe-info">
            注册时间：{{ userInfo.userBirth | timestampToTime }}
          </span>
              </div>
              <el-divider></el-divider>
              <div class="personal-relation">
                <div class="relation-item">手机号:
                  <div style="float: right; padding-right:20px;">{{ userInfo.userPhone }}</div>
                </div>
              </div>
              <div class="personal-relation">
                <div class="relation-item">常住地址:
                  <div style="float: right; padding-right:20px;">{{ userInfo.userAddress }}</div>
                </div>
              </div>
              <div class="personal-relation">
                <div class="relation-item">喜欢的标签: <br>
                  <div style="float: right; padding-right:20px;">
                  </div>
                  <el-tag v-for="(item,index) in userInfo.userLikeTag" class="tag" @click="handleTags(item)"
                          :key="index"> {{ item }}
                  </el-tag>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple">
            <!--            基本信息-->
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>基本资料</span>
              </div>
              <div>
                <el-form label-width="80px" v-model="userInfo" size="small" label-position="right">
                  <el-form-item label="用户昵称" prop="userName">
                    <el-input auto-complete="off" v-model="userInfo.userName"></el-input>
                  </el-form-item>

                  <el-form-item label="性别" prop="gender">
                    <el-radio v-model="userInfo.userGender" value="男" label="男"></el-radio>
                    <el-radio v-model="userInfo.userGender" value="女" label="女"></el-radio>
                  </el-form-item>

                  <el-form-item label="手机号" prop="phone">
                    <el-input auto-complete="off" v-model="userInfo.userPhone"></el-input>
                  </el-form-item>

                  <el-form-item label="个人描述" prop="info">
                    <el-input auto-complete="off" v-model="userInfo.userInfo"></el-input>
                  </el-form-item>

                  <el-form-item label="常驻地址" prop="address">
                    <el-input auto-complete="off" v-model="userInfo.userAddress"></el-input>
                  </el-form-item>

                  <el-form-item label="生日" prop="birth">
                    <div class="block">
                      <el-date-picker
                        v-model="userInfo.userBirth"
                        type="datetime"
                        placeholder="选择日期时间">
                      </el-date-picker>
                    </div>
                    <!--                    <el-input auto-complete="off" v-model="userInfo.userBirth"></el-input>-->
                  </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button size="mini" @click="handleSubmitBasic()" type="primary">提交</el-button>
                </div>
              </div>
            </el-card>

            <!--  教育信息          -->
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>教育信息</span>
              </div>
              <div>
                <el-form label-width="80px" v-model="userInfo" size="small" label-position="right">
                  <el-form-item label="学校名称" prop="school">
                    <el-input auto-complete="off" v-model="userInfo.userSchool"></el-input>
                  </el-form-item>

                  <el-form-item label="专业" prop="major">
                    <el-input auto-complete="off" v-model="userInfo.userMajor"></el-input>
                  </el-form-item>

                  <el-form-item label="学历" prop="education">
                    <el-select v-model="userInfo.userEducation" placeholder="请选择">
                      <el-option value="小学" label="小学"></el-option>
                      <el-option value="初中" label="初中"></el-option>
                      <el-option value="高中" label="高中"></el-option>
                      <el-option value="中专" label="中专"></el-option>
                      <el-option value="本科" label="本科"></el-option>
                      <el-option value="大专" label="大专"></el-option>
                      <el-option value="研究生" label="研究生"></el-option>
                      <el-option value="博士" label="博士"></el-option>
                      <el-option value="硕士" label="硕士"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="入学时间" prop="schoolTime">
                    <div class="block">
                      <el-date-picker
                        v-model="userInfo.userSchoolTime"
                        type="date"
                        placeholder="选择日期时间">
                      </el-date-picker>
                    </div>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button size="mini" @click="handleSubmitEducation()" type="primary">提交</el-button>
                </div>
              </div>
            </el-card>

            <!--        喜欢的标签    -->
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>喜欢的标签</span>
              </div>
              <div>
                <div style="float: left;margin: 10px" v-for="(item,index) in tagList" :key="index">
                  <el-tag style="cursor:pointer;" size="small" @click="handleLikeTags(item.tagsName)" type="success">
                    {{ item.tagsName }}
                  </el-tag>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>

      </el-row>
    </div>

    <!--  弹出上传头像  -->
    <el-dialog
      title="上传头像"
      :visible.sync="visible"
      width="15%">
      <el-upload
        class="avatar-uploader"
        action="http://localhost:8002/user/uploadHead"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>

      <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">完 成</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
export default {
  name: 'userInfo',

  data() {
    return {
      visible: false,
      userInfo: {
        userAddress: '',
        userBirth: '',
        userEducation: '',
        userFans: '',
        userGender: '',
        userInfo: '',
        userLikeTag: '',
        userMajor: '',
        userName: '',
        userPassword: '',
        userRoleId: '',
        userSchool: '',
        userSchoolTime: '',
        userVisits: '',
        usernameId: 9847,
        userPhone: '',
        userEmail: '',
        userHead: '',
      },

      imageUrl: '',
      tagInfo: {
        tagsArticleNum: '',
        tagsIcon: '',
        tagsId: '',
        tagsLink: '',
        tagsName: '',
      },

      tagList: [],
    }
  },

  filters: {
    /**
     * 格式化时间戳
     * @param time
     * @returns {string}
     */
    timestampToTime(time) {
      let date = new Date(time) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + '-';
      let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
      let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
      let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
      let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
      let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
      return Y + M + D;
    }
  },

  methods: {
    /**
     * 点击头像弹出上传头像
     */
    popUpload() {
      this.visible = true
    },

    /**
     * 头像上传成功后
     * @param res 后端返回的数据
     * @param file 文件对象
     */
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      //上传完成后的图片链接
      this.userInfo.userHead = this.imageUrl
      this.userInfo.userLikeTag = JSON.stringify(this.userInfo.userLikeTag).replaceAll('\\', '');
      this.$request.updateUserHead(this.userInfo).then((data) => {
        if (data.code !== 200) {
          this.$message.error('操作失败')
          return
        }

        this.$message.success('操作成功')

        this.getUserInfo()
      })
    },
    /**
     * 头像上传成功前
     * @param file
     * @returns {boolean}
     */
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },


    /**
     * 修改用户基本信息
     */
    handleSubmitBasic() {
      let s = JSON.stringify(this.userInfo.userLikeTag);
      s.replaceAll('\\', '');
      this.userInfo.userLikeTag = s

      this.$request.updateUserBasic(this.userInfo).then((data) => {
        if (data.code !== 200) {
          this.$message.error('操作异常,未成功')
          return
        }

        this.$message.success('操作成功')
        //获取用户信息
        this.getUserInfo()
      })
    },

    /**
     * 处理提交教育经历
     */
    handleSubmitEducation() {
      let s = JSON.stringify(this.userInfo.userLikeTag);
      s.replaceAll('\\', '');
      this.userInfo.userLikeTag = s

      this.$request.updateUserEducation(this.userInfo).then((data) => {
        if (data.code !== 200) {
          this.$message.error('操作异常,未成功')
          return
        }

        this.$message.success('操作成功')
        //获取用户信息
        this.getUserInfo()
      })
    },

    /**
     * 点击标签添加到我喜欢的标签
     */
    handleLikeTags(value) {

      this.$request.addLikeTag(value, this.$user).then((data) => {
        setTimeout(() => {
          //更新用户信息
          this.getUserInfo()
        }, 500)

        if (data.data === 'waning') {
          this.$message.warning('已有此标签')
          return;
        }

        this.$message.success('添加成功')
      })

    },
    /**
     * 点击标签
     * @param value
     */
    handleTags(value) {
      this.$router.replace(`/userTags/${value}`)
    },

    /**
     * 获取所有标签
     */
    getTagsList() {
      this.$request.getTagsList().then((data) => {
        this.tagList = data.data
      })
    },
    //获取用户个人信息
    getUserInfo() {
      this.$request.getUserInfo(this.$user).then((data) => {
        data.data.userLikeTag = JSON.parse(data.data.userLikeTag)
        this.userInfo = data.data
      })
    }
  },

  created() {
    this.getUserInfo()
    this.getTagsList()
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #e13636;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.background {
  margin-top: 0;
  width: 100%;
  height: 90vh;
  background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}

.wrap {
  width: 70%;
  margin: auto;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
  margin-top: 10px;
}

.name-role {
  font-size: 16px;
  padding: 5px;
  text-align: center;
}

.sender {
  text-align: center;
}

.registe-info {
  text-align: center;
  padding-top: 10px;
}

.personal-relation {
  font-size: 16px;
  padding: 0px 5px 15px;
  margin-right: 1px;
  width: 100%
}

.relation-item {
  padding: 12px;

}

.dialog-footer {
  padding-top: 10px;
  padding-left: 10%;
}

.el-row {
  margin-bottom: 20px;

  /*&:last-child {*/
  /*  margin-bottom: 0;*/
  /*}*/
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  /*background: #99a9bf;*/
}

.bg-purple {
  /*background: #d3dce6;*/
}

.bg-purple-light {
  /*background: #e5e9f2;*/
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
